<template>
    <div class="infoNumber">
        <div class="titleText"><slot name="title"></slot></div>
        <div class="date">
            <div class="day">
                <div>本日</div>
                <div>{{ infoNum.today_count }}</div>
            </div>
            <div class="week">
                <div>本周</div>
                <div>{{ infoNum.week_count }}</div>
            </div>
            <div class="month">
                <div>本月</div>
                <div>{{ infoNum.month_count }}</div>
            </div>
        </div>
    </div>
</template>
    
<script setup >
defineProps({
    infoNum: {
        type: Object,
        default: {
            today_count: 0,
            week_count: 0,
            month_count: 0,
        },
    },
});
</script>
    
<style lang="scss" scoped>
.infoNumber {
    border: 1px solid var(--border-color-tint);
    background: #fff;
    display: flex;
    flex-direction: column;
    .titleText {
        padding: 16px 24px;
        font-size: 16px;
        border-bottom: 1px solid var(--border-color-tint);
    }
    .date {
        padding: 24px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        div > div:first-child {
            color: var(--color-text-tint);
            margin-bottom: 8px;
        }
        div > div:last-child {
            font-size: 24px;
        }
    }
}
</style>